<template>
    <div ref="parent" class="game-map">
        <div class="canvas-container">
            <canvas ref="canvas" tabindex="0"></canvas>
            <!-- 设置按钮 -->
            <div class="setting-btn" @click="togglePauseMenu">
                <el-icon>
                    <Setting />
                </el-icon>
            </div>
        </div>
        <!-- 暂停菜单 -->
        <div v-if="isPause" class="pause-menu">
            <div class="pause-menu-content">
                <h2>游戏已暂停</h2>
                <div class="pause-menu-buttons">
                    <button class="resume-btn" @click="resumeGame">返回游戏</button>
                    <button class="exit-btn" @click="exitGame">退出游戏</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { Setting } from '@element-plus/icons-vue'
    import { useRouter } from 'vue-router'
    import { onMounted, onUnmounted, ref } from 'vue'
    import { PvEGameMap } from '@/assets/map/pve/PvEGameMap.js'
    import { GameObject } from '@/assets/GameObject.js'

    const parent = ref(null)
    const canvas = ref(null)
    let gameMapInstance = null

    const router = useRouter()

    let isPause = ref(false)

    const togglePauseMenu = () => {
        if (isPause.value) {
            resumeGame()
        } else {
            pauseGame()
        }
    }

    // 暂停游戏
    const pauseGame = () => {
        isPause.value = true
        GameObject.pause_game()
    }

    // 继续游戏
    const resumeGame = () => {
        isPause.value = false
        GameObject.resume_game()
    }

    // 退出游戏
    const exitGame = () => {
        // 销毁游戏地图实例
        if (gameMapInstance) {
            GameObject.reset_game_objects()
            gameMapInstance = null
        }
        // 返回到游戏模式选择页面
        router.push('/mode/')
    }

    const resize = () => {
        if (!parent.value || !canvas.value) return
        // 获取父容器尺寸并设置canvas尺寸
        canvas.value.width = parent.value.clientWidth
        canvas.value.height = parent.value.clientHeight
        // 如果游戏地图实例存在，则调用resize方法
        if (gameMapInstance) {
            gameMapInstance.resize()
        }
    }

    onMounted(() => {
        resize()

        gameMapInstance = new PvEGameMap(canvas.value.getContext('2d'), 'hard')
        window.addEventListener('resize', resize)
    })

    onUnmounted(() => {
        window.removeEventListener('resize', resize)
    })
</script>

<style scoped>
    .game-map {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    canvas {
        display: block;
    }

    .canvas-container {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .setting-btn {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        z-index: 10;
        transition: all 0.3s;
    }

    .setting-btn:hover {
        background-color: rgba(0, 0, 0, 0.8);
        transform: scale(1.1);
    }

    .pause-menu {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 20;
    }

    .pause-menu-content {
        background-color: rgba(30, 30, 30, 0.9);
        padding: 40px;
        border-radius: 10px;
        text-align: center;
        width: 400px;
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
        border: 1px solid rgba(255, 215, 0, 0.3);
        color: white;
    }

    .pause-menu-content h2 {
        font-size: 28px;
        margin-bottom: 30px;
        color: #ffd700;
    }

    .pause-menu-buttons {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .pause-menu-buttons button {
        padding: 12px 0;
        border: none;
        border-radius: 5px;
        font-size: 18px;
        cursor: pointer;
        transition: all 0.3s;
    }

    .resume-btn {
        background-color: #4caf50;
        color: white;
    }

    .resume-btn:hover {
        background-color: #45a049;
    }

    .exit-btn {
        background-color: #f44336;
        color: white;
    }

    .exit-btn:hover {
        background-color: #d32f2f;
    }
</style>
